<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        <child>
            <!-- slot-scope就是将子组件模板作用域用props代替
                 所以props里就有子模版里绑定的:item属性
                 所以就能循环显示{{props.item}}
                 这就是作用域插槽
                 作用域插槽必须用template包起来
            -->
            <template slot-scope="props">
                <li>{{props.item}}</li>
            </template>
        </child>
    </div>
    
    <script>
        Vue.component(
            'child',
            {
                data(){
                    return {
                        list:[1,2,3,4]
                    }
                },
                template:`<div>
                           <ul>
                              <slot v-for="item of list" 
                                    :item=item
                              ></slot>
                           </ul>
                          </div>`
            }
        )
        var vm = new Vue({
            el:"#root",

        })
    </script>

</body>
</html>